/*
 * @Date: 2023-11-15 13:57:20
 * @LastEditors: lyx
 * @LastEditTime: 2023-11-15 14:59:27
 * @FilePath: \sup-mini-app\src\components\UserModal\index.tsx
 * @Description: 绑定 obp 用户操作
 */
import { Button, View } from "@tarojs/components";
import React from "react";
import {
  AtAvatar,
  AtModal,
  AtModalAction,
  AtModalContent,
  AtModalHeader,
} from "taro-ui";
import "./index.scss";

function UserModal(props: IUserModalProps) {
  const { open, info, onClose, onOk } = props;
  return (
    <AtModal isOpened={open}>
      <AtModalHeader>绑定用户</AtModalHeader>
      <AtModalContent>
        <View className="user-info-wrapper">
          <View className="avatar">
            <AtAvatar text={info.nickName}></AtAvatar>
          </View>
          <View className="content">
            <View className="item">用户名：{info.username}</View>
            <View className="item">昵称：{info.nickName}</View>

            <View className="item">手机号：{info.phone}</View>
            <View className="item">邮箱：{info.email}</View>
          </View>
        </View>
      </AtModalContent>
      <AtModalAction>
        <Button onClick={onClose}>取消</Button>
        <Button onClick={onOk}>绑定</Button>
      </AtModalAction>
    </AtModal>
  );
}

export default UserModal;
